<template>
  <div class="cart">
    <div class="empty" v-if="false">
      <img
        class="empty-cart"
        src="https://s.yezgea02.com/1604028375097/empty-car.png"
        alt="空购物车"
      />
      <div class="title">购物车空空如也</div>
      <van-button round color="#1baeae" type="primary" @click="goTo" block
        >前往选购</van-button
      >
    </div>
    <div class="packfull" else>
      <van-sticky>
      <div class="cart-title"><h2>购物车</h2><span>共件{{sumnum}}宝贝</span></div>
      </van-sticky>
      <van-pull-refresh class="my-refresh" v-model="Refresh" @refresh="onLoad" success-text="刷新成功">
      <div v-for="(value,index) in products" :key="index">
        <productcard :product='value' @modify='modify' :keys='index'></productcard>
       
      </div>
      </van-pull-refresh>
      <van-submit-bar
        class="my-submit-bar"
        :price="sumprice"
        button-text="结 算"
        @submit="onSubmit"
      >
        <van-checkbox @click="checkall" checked-color="#fe5b33" v-model="checked">全选</van-checkbox>
        <template #tip>
          你的收货地址不支持同城送, <span class="updataaddress" @click="onClickLink">修改地址</span>
        </template>
      </van-submit-bar>
    </div>
    <div class="guesslike"><img src="https://img.alicdn.com/tfs/TB1V2eQrKSSBuNjy0FlXXbBpVXa-966-114.png" class="recommend-hd-bg"></div>
    <!-- <product :list="list" @to-load="onSearch" /> -->
    <NavBar/>
  </div>
</template>

<script>

import { useRouter } from "vue-router";
import { computed, reactive, toRefs } from 'vue';
// import { searchjd } from "../api/box";
import NavBar from "@/components/home/NavBar";
import productcard from "@/components/cart/product-card";
// import product from "../components/product";
export default {
  components: {
    NavBar,
    productcard,
    // product,
  },
  setup() {
    const data=reactive({
      checked:false,
      loading:false,
      Refresh:false,
      products:[
        {
          name:'恋晴18k彩金四叶草项链女士白铂金轻奢吊坠女生时尚首饰品闺蜜情侣颈链百搭锁骨链情人节生日礼物送女友 18K金幸运四叶草吊坠+银链+高档浪漫礼盒',
          img:'https://img14.360buyimg.com/n7/jfs/t1/143217/35/12321/86351/5f9a17e2E5bcc374b/9fa7807a992742eb.jpg',
          price:1999.99,
          sku:'29248037763',
          num:2,
        },
        {
          name:'暗饰天使之翼银项链女生爱心吊坠银饰锁骨链手链颈链套装表白生日礼品情侣时尚饰品首饰情人节新年礼物送女友 天使之翼项链+手链（抽拉玫瑰礼盒）',
          img:'https://img12.360buyimg.com/n7/jfs/t1/165522/34/2976/422968/6002bad7E5732cfb7/3ba3be804c43c3ad.jpg',
          price:439.00,
          sku:'10026301231462',
          num:2,
        },
        {
          name:'桑玛星月银项链女韩版学生星星月亮镀玫瑰金色吊坠女士颈链简约锁骨链首饰时尚饰品情侣生日礼物 玫瑰金色星月银项链（花束小熊礼盒+证书）',
          img:'https://img13.360buyimg.com/n7/jfs/t1/104999/22/10721/155645/5e2162f8Ed8fdff62/d80d1493963041e2.jpg',
          price:148.00,
          sku:'52432847013',
          num:1,
        },
        {
          name:'【卡蒂罗&故宫上新联名款】925银项链女款韩版吊坠首饰女士饰品生日礼物送女友感温变色 御猫项链',
          img:'https://img11.360buyimg.com/n7/jfs/t1/163640/17/5358/109164/601a7374E1ff4c6cb/04286d3021fb5dc4.jpg',
          price:278.00,
          sku:'100009551391',
          num:1,
        },
        {
          name:'周大生黄金吊坠女足金珐琅皮卡丘可爱首饰激萌硬金珐琅宝可梦系列 雀跃皮卡丘吊坠(约1.6g)',
          img:'https://img13.360buyimg.com/n7/jfs/t1/169801/10/13217/146177/60519ef5E561a882b/148e60d038ee61f1.jpg',
          price:1680.00,
          sku:'10024814480863',
          num:4,
        },
        {
          name:'唯一银手镯子女士款三生三世990足银白银首饰品光面年轻时尚简约串珠推拉实心送女友生日礼物22±1g桃韵',
          img:'https://img11.360buyimg.com/n7/jfs/t1/163954/32/13120/72143/605460baEdfd463c3/2b7332dc69f23ea7.jpg',
          price:299.00,
          sku:'100000238691',
          num:1,
        },
        {
          name:'Armani阿玛尼项链女士 锁骨链吊坠时尚饰品首饰奢侈品 生日礼物送女友老婆 小蛮腰礼盒装EGS2424221',
          img:'https://img14.360buyimg.com/n7/jfs/t1/88069/10/9475/391773/5e0dd250E908e08c9/f2117ff9dbdb1911.jpg',
          price:970.00,
          sku:'69885763499',
          num:2,
        },
        {
          name:'JALLOO星月项链女玫瑰金色银吊坠女星星月亮锁骨链学生闺蜜网红情侣简约气质韩版首饰时尚饰品 星月项链',
          img:'https://img14.360buyimg.com/n7/jfs/t1/152122/11/3688/224772/5f98eae6E886608a6/453ef0979344a7a6.jpg',
          price:89.00,
          sku:'71570442024',
          num:6,
        },
      ],
       list: {
        loading: false,
        finished: false,
        goods: [],
      },
      jd: {
        datanum: 30,
        search: "好吃",
        sort: "",
        pagesize: 1,
      },
    })
    const router = useRouter();
    const goTo = () => {
      router.push({ path: "/home" });
    };
    const modify=(foods)=>{
      switch (foods.flag){
        case "checked":
          data.products[foods.keys].checked=!data.products[foods.keys].checked;
          data.checked=false;
          break;
        case "add" :
          data.products[foods.keys].num>=0?data.products[foods.keys].num++:'';
          break;
        case "del" :
          data.products[foods.keys].num>0?data.products[foods.keys].num--:'';
          break;
        default:break;
      }
    }
    const onSubmit = () => {
      router.push({ path: "/confirm" });
    };
    const onClickLink = () => {
      router.push({ path: "/address" });
    };
      let price=0;
    const sumprice=computed(()=>{
      price=0;
      data.products.forEach(ele=>{
        if(ele.checked){
        price+=ele.price*ele.num;
        }
      })
      
      return price;
    });
    let num=0;
    const sumnum=computed(()=>{
      num=0;
      data.products.forEach(ele=>{
        num+=ele.num;
      })
      
      return num;
    })
    const onLoad=()=>{
      setTimeout(()=>{data.Refresh=false},2000)
    }
    const checkall=()=>{
        data.products.forEach(ele=>{
          ele.checked=data.checked;
        })
      }
      // const onSearch = async (value, updata,sort) => {
      //如果搜索内容变化
    //   const res = await searchjd(data.jd);

    //   data.jd.pagesize = data.jd.pagesize + 1;

    //   data.list.goods.push(...res);

    //   data.list.loading = false;

    //   if (res.lenght < data.jd.datanum) {
    //     data.finished = true;
    //   }
    // };
    return { ...toRefs(data), goTo, onSubmit, onClickLink,sumprice,checkall,onLoad,modify,sumnum };
  },
};
</script>
<style lang="scss" scoped>
.cart{
  height: 100vh;
  .cart-title{
    padding:20px 20px 10px 20px;
    display: flex;
  h2{
    margin: 0;
  }
  span{
    padding: 5px 20px;
    font-size: 13px;
  }
  }
}
.empty {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  margin-top: 200px;
  .empty-cart {
    width: 150px;
    margin-bottom: 20px;
  }
  .van-icon-smile-o {
    font-size: 50px;
  }
  .title {
    font-size: 16px;
    margin-bottom: 20px;
  }
}
.packfull {
  background: #f7f7f7;
  .cart-title {
    text-align: left;
    background: #f7f7f7;
  }
  .my-refresh{
    overflow: visible;
  }
  .my-checkbox{
    overflow: visible;
  }
  .my-submit-bar {
    bottom: 50px;
  }
  .updataaddress{
    color:#1989fa;
  }
}
.guesslike{
  img{
    width: 46%;
    margin: 15px 0;
  }
}
</style>